<template>
	<view class="container" v-if='detail'>
		<view class="nav" @tap="(detail.status==1 || detail.status==5)?toEexamProgress():''">
			<view class="state">{{detail.statusTxt}}</view>
			<view class="prompt" v-if="detail.status==0">{{identity?'请及时审批陪宠师考试结果。':'请耐心等候审批'}}</view>
			<view class="prompt" v-if="detail.status==3">考试未通过</view>
			<view class="prompt" v-if="detail.status==2">原因：{{detail.reason}}</view>
			<view class="prompt" v-if="(detail.status==1 || detail.status==5)">考试已通过并获得证书</view>
			<view class="certificate" v-if="(detail.status==1 || detail.status==5)&&detail.isCertificate==0">
				<image @tap.stop="preview" :src="detail.certificate"></image>
			</view>
			
		</view>
		<view class="candidate module">
			<view class="module_title"><text></text><view>考生信息</view></view>
			<view class="item">
				<view class="label">昵称</view>
				<view class="value nickName"><image :src="detail.avatar"></image><text>{{detail.nickName}}</text></view>
			</view>
			<view class="item"><view class="label">用户ID</view><view class="value">{{detail.userId}}</view></view>
			<view class="item"><view class="label">用户手机号</view><view class="value">{{detail.phone}}</view></view>
			<view class="item">
				<view class="label">基础信息</view>
				<view class="value duo">{{detail.nickName}} <text></text>{{detail.sex==1?'男':'女'}} <text></text>{{detail.age}}岁 </view>
			</view>
		</view>
		<view class="examinationPaper module" @tap="toCourseDetails">
			<view class="module_title"><text></text><view>考卷信息</view></view>
			<view class="item">
				<view class="label">试卷名称</view>
				<view class="value">{{detail.examName}}</view>
			</view>
			<view class="item">
				<view class="label">关联课程</view>
			    <view class="value course"><image :src="detail.courseCover"></image><text>{{detail.courseName}}</text></view>
			</view>
			<view class="item"><view class="label">开考时间</view><view class="value">{{detail.startTime}}</view></view>
			<view class="item"><view class="label">交卷时间</view><view class="value">{{detail.submitTime}}</view></view>
		</view>
		<view class="answerDetails module">
			<view class="module_title"><text></text><view>考卷信息</view></view>
			<view class="information">
				<view class="information_item"><text>答题用时</text><view>{{detail.userAnswerTime}}分钟</view></view>
				<view class="information_item"><text>答题数</text><view>{{detail.userAnswerNum}}题</view></view>
				<view class="information_item"><text>考试分数</text><view>{{detail.score}}分</view></view>
			</view>
			<view class="detail">
				<view class="detail_title"><view>答题详情</view><uni-icons type="top" :color="'#1A1A1A'" :size="20"></uni-icons></view>
				<view class="list">
					<view class="detail_item" v-for="(item,index) in detail.examRecordQuestionList" :key="item.id">
						<view class="num">0{{index+1}}</view>
						<view class="item_content">
							<view class="item_title">{{item.questionName}}</view>
							<view class="answer">
								<view v-if="item.userAnswer">考生答案：[<text :class="item.userAnswer==item.correctAnswer?'zheng':''">{{item.userAnswer?item.userAnswer:'未作答'}}</text>]</view>
								<view>正确答案：[<text class="color" v-if="item.userAnswer">{{item.correctAnswer}}</text>]</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="examNumber">
			<view>考试编号</view>
			<view class="id">{{detail.id}}<text></text><view @click="oncopy">复制</view></view>
		</view>
		<view class="footer see" v-if="(detail.status==1 || detail.status==5)&&detail.isCertificate==0">
			<view @tap="toWorkCode">查看证书</view>
		</view>
		<view class="footer" v-if="identity==1&&detail.status==0">
			<view @tap="btn(1)">不通过</view>
			<view @tap="btn(0)">通过</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import api from '@/api'
import {onShow,onLoad} from '@dcloudio/uni-app'
import {useStudioStoreToRefs} from "@/store/useStudioStore";
let {studio,identity} = useStudioStoreToRefs()
onLoad((e)=>{
	recordId.value = e.id
})
onShow(()=>{
	getDetails()
})

const statusText = (status:number)=>{
// 状态（0-考试待批阅，1-批阅已通过，2-批阅未通过，3-考试未通过,4-考试中,5-考试通过（无需批阅））
    if(status==0){
		return '考试待批阅'
	}else if(status==1 || status==5){
		return '已通过'
	}else if(status==2){
		return '批阅未通过'
	}else if(status==3){
		return '考试未通过'
	}else if(status==4){
		return '考试中'
	}
}

const recordId = ref('')	
const detail = ref() //详情数据
//获取详情
const getDetails = async() =>{
	const res:any = await api({
		method: 'get',
		url: `/mall/exam/exam-record/info/${recordId.value}`,
	})
	if(res){
		console.log(res.data)
		detail.value = res.data
		detail.value.statusTxt = statusText(detail.value.status)
	}
}
//图片放大
const preview = () => {
	uni.previewImage({
		current: 0,
		urls: [detail.value.certificate],
	});
}
//跳转课程详情
const toCourseDetails = () =>{
	uni.navigateTo({
		url:`/pages/businessSchool/courseDetails/courseDetails?courseId=${detail.value.courseId}`
	})
	
}
//跳转进度
const toEexamProgress = async() =>{
	uni.navigateTo({
		url:`/pages/businessSchool/examProgress/index?id=` + recordId.value
	})
}
//复制
const oncopy = ()=>{
	uni.setClipboardData({
		data: detail.value.id,
		success: () => {
			uni.showToast({
				title: '复制成功',
				icon: 'success'
			});
		}
	});
}
const toWorkCode = ()=>{
	uni.navigateTo({
		url:`/pages/share/workCode/index?type=4&id=${recordId.value}`
	})
}
//
const btn = async(type:number)=>{
	const ress:any = await api({
		method: 'get',
		url: `/mall/exam/exam-record/checkStatus`,
		data:{
			id:recordId.value,
			status:detail.value.status
		}
	})
	if(ress){
		if(ress.data==1){
			//0 通过  1 不通过
			if(type==0){
				passThrough()
			}else{
				refuse()
			}
		}else{
			uni.showModal({
				title: '提示',
				content: '数据已过期，请刷新重试',
				showCancel:true,
				confirmText:'好的',
				success: function (res) {
					getDetails()
				}
			});
		}
	}

}

//不通过
const refuse = () =>{
	uni.navigateTo({
		url:`/pages/businessSchool/examineApprove/index?id=${recordId.value}`
	})
}
//通过
const passThrough = ()=>{
	uni.showModal({
		title: "提示",
		content: "确定通过该考试并发放考试证书吗？",
		success: async (res) => {
			if (res.confirm) {
				const ress:any = await api({
					method: 'post',
					url: `/mall/exam/exam-record/approval`,
					data:{
						reason:'',
						id:recordId.value,
						type:2
					}
				})
				if(ress){
					getDetails()
				}
			}
		}
	});
}
</script>

<style lang="scss" scoped>
.container{
	line-height: 1;
	padding-bottom: calc(120rpx + var(--safe-area-bottom));
}
.nav{
	width: 100%;
	padding: 48rpx 32rpx 96rpx;
	box-sizing: border-box;
	border-radius: 0 0 40rpx 40rpx;
	background: linear-gradient( 180deg, #FF7D9E 18%, #FFB796 100%);
	.state{
		color: #FFFFFF;
		font-size: 40rpx;
		font-weight: bold;
	}
	.prompt{
		color: #FFFFFF;
		font-size: 26rpx;
		margin-top: 16rpx;
	}
	.certificate{
		color: #FFFFFF;
		font-size: 26rpx;
		margin-top: 16rpx;
		@include flex(center);
		image{
			width: 160rpx;
			height: 160rpx;
			margin-right: 16rpx;
		}
	}
}
.module{
	width: 686rpx;
	margin:0 0 24rpx 32rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	padding: 42rpx 32rpx;
	box-sizing: border-box;
	.module_title{
		color: #1B2120;
		font-size: 36rpx;
		font-weight: bold;
		@include flex(center);
		padding-bottom: 32rpx;
		border-bottom: 1rpx solid #E4E6E6;
		text{
			width: 8rpx;
			height: 32rpx;
			background: #FF6084;
			margin-right: 24rpx;
			border-radius: 4rpx;
		}
	}
	.item{
		width: 100%;
		margin-top: 32rpx;
		@include flex(center);
		.label{
			width: 154rpx;
			color: #5C5E5E;
			font-size: 26rpx;
			font-weight: bold;
			padding-bottom: 32rpx;
		}
		.value{
			color: #1B2120;
			font-size: 30rpx;
			width: calc(100% - 154rpx);
			padding:0 10rpx 32rpx 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid #E4E6E6;
		}
		.nickName{
			@include flex(center);
			image{
				width: 64rpx;
				height: 64rpx;
				margin-right: 16rpx;
			}
		}
		.duo{
			@include flex(center);
			text{
				width: 2rpx;
				height: 24rpx;
				margin: 0 16rpx;
				background: #CACCCC;
			}
		}
		.course{
			font-size: 30rpx;
			line-height: 40rpx;
			@include flex(center);
			image{
				width: 144rpx;
				height: 82rpx;
				margin-right: 16rpx;
				border-radius: 12rpx;
			}
		}
	}
}
.candidate{
	margin-top: -64rpx;
}
.answerDetails{
	.information{
		width: 100%;
		margin-top: 40rpx;
		padding: 40rpx 48rpx;
		background: #FCF2F4;
		border-radius: 24rpx;
		box-sizing: border-box;
		@include flex(center,space-between);
		.information_item {
			color: #5C5E5E;
			font-size: 24rpx;
			@include flex(center,center);
			flex-direction: column;
			view{
				margin-top: 16rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #1B2120;
			}
		}
	}
	.detail{
		width: 100%;
		margin-top: 24rpx;
		background: #F8F8F8;
		border-radius: 16rpx;
		padding: 32rpx 24rpx;
		box-sizing: border-box;
		.detail_title{
			@include flex(center,space-between);
			view{
				font-weight: bold;
				font-size: 30rpx;
				color: #1B2120;
			}
		}
		.detail_item{
			width: 100%;
			padding-top: 32rpx;
			margin-top: 32rpx;
			border-top: 1rpx solid #E6E6E6;
			@include flex(flex-start);
			.num{
				width: 56rpx;
				color: #5C5E5E;
				font-size: 26rpx;
				font-weight: bold;
			}
			.item_content{
				width: calc(100% - 56rpx);
				.item_title{
					font-size: 28rpx;
					color: #1B2120;
					line-height: 40rpx;
					margin-bottom: 24rpx;
				}
				.bold{
					font-weight: bold;
				}
				.answer{
					width: 100%;
					color: #5C5E5E;
					font-size: 26rpx;
					font-weight: bold;
					@include flex(center,space-between);
					.color{
						color: #1B2120;
					}
					.zheng{
						color: #08B66E;
					}
				}
			}
		}
	}
}
.examNumber{
	width: 686rpx;
	color: #5C5E5E;
	font-size: 28rpx;
	padding: 40rpx 32rpx;
	background: #FFFFFF;
	box-sizing: border-box;
	border-radius: 24rpx;
	margin-left: 32rpx;
	@include flex(center,space-between);
	.id{
		color: #1B2120;
		font-size: 28rpx;
		@include flex(center);
		view{
			font-size: 28rpx;
			color: #FF6084;
			text-decoration-line: underline;
		}
		text{
			width: 2rpx;
			height: 28rpx;
			background-color: #1B2120;
			margin: 0 20rpx;
		}
	}
}
.footer{
	position: fixed;
	bottom: 0;left: 0;
	width: 100vw;
	padding:8rpx 32rpx;
	padding-bottom: calc(var(--safe-area-bottom) + 4rpx);
	box-sizing: border-box;
	background-color: #ffffff;
	@include flex(center,space-between);
	view{
		width: 340rpx;
		height: 88rpx;
		color: #FF6084;
		font-size: 28rpx;
		border-radius: 44rpx;
		box-sizing: border-box;
		@include flex(center,center);
		border: 1rpx solid #FF6084;
		&:last-child{
			color: #FFFFFF;
			background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
		}
	}
}
.see{
	view{width: 100%;}
}
</style>
